<template>
    <div class="carloanDiscount">
        <div class="load_content">
            <!-- 无贴息-->
            <div  v-if="discountOption==0" class="mt10">
                <Row>
                    <Col offset="1">
                        <div class="commonModel">
                            <span>客户利率:</span>
                            <div class="newele">
                                <Input v-model="noDiscountCarLoan.newValue.custRate" style="width:80px" placeholder="" :readonly="readonly"/>
                                <span>%</span>
                            </div>
                            <div class="oldele">
                                <b>{{noDiscountCarLoan.oldValue.custRate}}</b> <span>%</span>
                            </div>
                        </div>
                    </Col>
                </Row>
                <Row>
                    <Col offset="1">
                        <div class="commonModel">
                            <span>首期月供:</span>
                            <div class="newele">
                                <Input v-model="noDiscountCarLoan.newValue.monthPay" style="width:80px" placeholder="" :readonly="readonly"/>
                                <span>元</span>
                            </div>
                            <div class="oldele">
                                <b>{{noDiscountCarLoan.oldValue.monthPay}}</b><span>元</span>
                            </div>
                        </div>
                    </Col>
                </Row>
            </div>
            <!-- 灵活贴息 -->
            <div v-if="discountOption==2" class="mt10">
               <div class="mt10">
                    <div>
                         <common-loan :formData="flexCarLoanForm"></common-loan>
                    </div>
                </div>
            </div>
            <!-- 非灵活贴息 -->
            <div v-if="discountOption==1" class="mt10">
                <div class="mt10">
                    <Row>
                        <Col offset="1">
                            <div class="commonModel">
                                <span>客户利率:</span>
                                <div class="newele">
                                    <Input v-model="noflexCarLoan.newValue.custRate" style="width:80px" placeholder="" :readonly="readonly"/>
                                    <span>%</span>
                                </div>
                                <div class="oldele">
                                    <b>{{noflexCarLoan.oldValue.custRate}}</b><span>%</span>
                                </div>
                            </div>
                        </Col>
                    </Row>
                    <Row>
                        <Col offset="1">
                            <div class="commonModel">
                                <span>首期月供:</span>
                                <div class="newele">
                                    <Input v-model="noflexCarLoan.newValue.monthPay" style="width:80px" placeholder="" :readonly="readonly"/>
                                    <span>元</span>
                                </div>
                                <div class="oldele">
                                    <b>{{noflexCarLoan.oldValue.monthPay}}</b><span>元</span>
                                </div>
                            </div>
                        </Col>
                    </Row>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
import CommonLoan from "../common-loan/commonLoan.vue"
import * as utils from '_p/afs-apply/assets/js/utils.js'

export default {
    name:"carloanDiscount",
    data(){
        return{
            readonly:true,
            // 无贴息车贷无附加贷
            noDiscountCarLoan:{
                oldValue:{

                },
                newValue:{

                },
            },
            // 灵活贴息车贷
            flexCarLoanForm:{
                maxDisCountAmt:"",
                oldValue:{

                },
                newValue:{

                },
                loadList:[],

            },
            // 非灵活贴息车贷
            noflexCarLoan:{
                oldValue:{

                },
                newValue:{

                },
            },

        }
    },
    components:{
        CommonLoan
    },
    props:{
        discountOption:{
            type:String,
        },
        carCostDetails:{
            type:Object
        },
        discountList:{
            type:Array
        }
    },
    watch:{

    },
    computed: {

    },
    created(){
        console.log("金融产品页面-车贷信息部分")
    },
    mounted(){

    },
    watch:{
        carCostDetails(val){
            if(Object.keys(val).length>0){
              this.queryLoanInfo(val);
            }
        }
    },
    methods:{
        queryLoanInfo(val){
            let {oldCarValue}=val;
            let {newCarValue}=val;
            // 无贴息
            if(val.discountOption==0){
                this.noDiscountCarLoan.oldValue=oldCarValue;
                this.noDiscountCarLoan.newValue=newCarValue
            }else if(val.discountOption==1){
                this.noflexCarLoan.oldValue=oldCarValue;
                this.noflexCarLoan.newValue=newCarValue;
            }else if(val.discountOption==2){
                this.flexCarLoanForm.oldValue=oldCarValue;
                this.flexCarLoanForm.newValue=newCarValue;
                console.log(val.discountList,"val.discountList")
                this.flexCarLoanForm.loadList=this.queryDiscount(val.discountList);
            }
        },
        queryDiscount(discountList){
            console.log(this.discountList,"discountList")
            let tempDiscout=[];
            discountList.forEach((item,index)=>{
                let discountParty=utils.setDataDictVal(this.discountList,item.discountId)
                let obj={
                    discountParty:discountParty,
                    discountAmt:item.discountAmt,
                }
                tempDiscout.push(obj);
            })
            return tempDiscout;
        }
    }
}
</script>

<style scoped>
.commonModel>div{
    display:inline-block;
}
.commonModel>div{
    position: relative;
}
.commonModel>div.newele{
    margin-bottom: 10px;
}
.commonModel>div.newele>span{
    position: absolute;
    margin-left: -16px;
    line-height: 24px;
}
.commonModel>div.oldele{
    margin-left: 10px;
}
.commonModel>div.oldele b{
    font-weight: normal;
}
</style>
